<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>async 和 await 函数</title>
</head>

<body>
    <!-- 
        任何的函数都可以被声明成一个async函数
        因为要实现的就是异步功能(定时器、ajax请求...)
        可能是要将实现的功能封装到一个函数之中，
        为了更好的表示函数之中是异步，所以在函数的前面添加一个async
     -->
    <script>
        //以前代码
        // const p1 = new Promise((resolve, reject) => {
        //     resolve('ok');
        // })
        // //只不过是从原来的回调地狱写法修改成了回调函数的链式写法，换汤不换药
        // //使用async结合await的终极目标：就是同步的代码来完成异步的功能
        // p1.then(value => {
        //     console.log(value);
        // }, reason => {
        //     console.log(reason);
        // }).then(value => {
        //     console.log(value);
        // }, reason => {
        //     console.log(reason);
        // })

        async function main() {
            //函数的内部可以添加任意的语句来执行，但是其真正的目的主要是为了得到一个Promise对象的状态以及结果值
            // console.log('哈哈哈哈');

            //情况1：返回非Promise对象的数据
            // return 100;

            //情况2：返回的是Promise对象
            //返回的这个Promise实例化对象的状态以及结果值将直接影响结果产生的Promise实例化对象的状态和结果值
            // return new Promise((resolve, reject) => {
            //     // resolve('ok');
            //     reject('error');
            // })

            //情况3：抛出异常
            // throw '出错啦';
            throw new Error('出错啦');
        }
        // 调用
        let result = main()
        // 这是没有使用await的情况
        result.then(value => {
            console.log(value);
        }, reason => {
            console.log(reason);
        })

        /*
        1、async函数结合await表达式
           1.1 async函数中不一定要完全结合await
           1.2 有await的函数一定是async函数
        2、await相当于then，可以直接拿到成功的Promise实例化对象的结果值
        3、await一定要写在async函数之中，但是async函数之中可以没有await
        4、如果await表达式后面是Promise实例化对象，则await返回的是Promise的成功的结果值
        5、如果await表达式后面的其他值，则会直接将这个值作为await的返回值
        */

        async function useAwait() {
            // 内部执行一步的功能 并且得到成功的结果数据值

            // 1 如果await右侧为非Promise类型的数据 await后面的值是什么 得到的结果就是什么
            // let a = await 100
            // console.log(a)//100

            // 2 如果右侧为Promise成功类型的数据
            let p1 = await new Promise((resolve, reject) => {
                resolve('ok')
            })
            console.log(p1)
            // 如果右侧为Promise 失败类型的数据 需要 try ...catch..来捕获
            // let p2 = await new Promise((resolve, reject) => {
            //     reject('error')
            // })
            // console.log(p2)

            try {
                let p2 = await new Promise((resolve, reject) => {
                    reject('error')
                })
                console.log(p2)
            } catch (e) {
                console.log(e)
            }
            // 有了try{...}catch(){...} 后续代码才能正常执行
            let p3 = await Promise.resolve('okk')
            console.log(p3)
        }
        useAwait()
    </script>
</body>

</html>